<template>
  <div class="contractmain">
    <ul class="contract">
      <li class="left">
        <contratnav
          v-bind:Prodata="getProdata"
          @func="codedata"
          v-bind:codetype="singlecode"
        ></contratnav>
      </li>
      <li class="cont">
        <contratcontheader v-bind:Prodata="singlegetProdata"></contratcontheader>
        <section class="kile">
            <ul class="mian">
                <li class="list" :class="{'acvte':kinletype == 1}"  @click="kileclick('1')">{{$t('contract[0]')}}</li>
                <li class="list" :class="{'acvte':kinletype == 2}" @click="kileclick('2')">{{$t('contract[1]')}}</li>
            </ul>
            <iframe :src="'./static/index.html?timers=5&code=' + singlegetProdata.code+'&baseUrl='+baseUrl+'&ws='+ws" width="100%" height="100%;" v-if="kinletype == 1"></iframe>
            <iframe :src="'./static/indexsd1.html?timers=5&code=' + singlegetProdata.code+'&baseUrl='+baseUrl+'&ws='+ws" width="100%" height="100%;" v-if="kinletype == 2"></iframe>
        </section>
        <!-- 交易 -->
        <section class="transaction">
          <el-tabs type="border-card" value="市价交易" >
            <el-tab-pane :label="$t('contract[2]')" name="市价交易" >
              <ul class="marketprice">
                <marketpricebuy
                  v-if="showCom"
                  v-bind:Prodata="singlegetProdata"
                  v-bind:codetype="getProInfodata"
                  :canUseMoney="canUseMoney"
                  @func="getMsgcreateOrder"
                ></marketpricebuy>
                <marketpricesell
                  v-if="showCom"
                  v-bind:Prodata="singlegetProdata"
                  v-bind:codetype="getProInfodata"
                  :canUseMoney="canUseMoney"
                  @func="getMsgcreateOrder"
                ></marketpricesell>
              </ul>
            </el-tab-pane>
            <el-tab-pane :label="$t('contract[3]')" name="限价交易" >
              <ul class="marketprice">
                <fixedpricebuy  
                  v-if="showCom"
                  v-bind:Prodata="singlegetProdata"
                  v-bind:codetype="getProInfodata"
                  :canUseMoney="canUseMoney"
                  @func="getMsgcreateOrder"></fixedpricebuy>
                <fixedpricesell  
                  v-if="showCom"
                  v-bind:Prodata="singlegetProdata"
                  v-bind:codetype="getProInfodata"
                  :canUseMoney="canUseMoney"
                  @func="getMsgcreateOrder"></fixedpricesell>
              </ul>
            </el-tab-pane>
          </el-tabs>
        </section>
      </li>
      <contratrealtime
        v-bind:Prodata="singlegetProdata"
        v-bind:codetype="singlecode"
      ></contratrealtime>
    </ul>
    <contract-order 
        :page="false"
    ></contract-order>
  </div>
</template>

<script>
import { mapActions } from "vuex"

import contratnav from "./components/nav";//nav
import contratcontheader from "./components/contheader"; //顶部
import contratrealtime from "./components/realtime"; //盘口实时成交
import marketpricebuy from "./components/marketprice/buy";//市价交易买入
import marketpricesell from "./components/marketprice/sell";//市价交易卖出
import fixedpricesell from "./components/fixedprice/sell";//限价交易买入
import fixedpricebuy from "./components/fixedprice/buy";//限价交易卖出
import ContractOrder from "_dom/contractorder";

import { assetInfo } from '@/api/user'
import { getPro, createOrder, codeinfo } from '@/api/contract';
import { codelist, contractws, getToken, contractwsdepth, contractwstrader } from "@/libs/util";
import {getBaseUrl,getWs} from '@/config'


// import kinleurld from '@/assets/static/index';
export default {
    name: "contractmain",
    data() {
        return {
            getProdata:[],//行情列表
            singlegetProdata:"",//单个行情数据
            singlecode:"",//单个行情数据标识
            getProInfodata: {
                leverage:[]
            },//币种数据
            showCom: true,
            kinletype: 1,
            canUseMoney: 0,
            baseUrl:getBaseUrl(),
            ws:getWs()
        };
    },
    methods: {
        ...mapActions([
            'assetInfo'
        ]),
        kileclick(data){//K线图切换
            this.kinletype = data;
        },
        codedata(data){//点击切换
            this.singlecode = data;
            this.showCom = false;
            this.$nextTick(()=>{
              this.showCom = true;
            })
            let _Data = _.cloneDeep(this.getProdata);
            for (let index = 0; index < _Data.length; index++) {
                if(_Data[index].code == data){
                    this.singlegetProdata = _Data[index];
                }
            };
            this.getProInfoget(data);
        },
        getBalance(){
          // 获取可用余额 1比比2合约3法币
          if(!getToken('token')){
              return false;
          }
          assetInfo({
            account: 2
          }).then(res =>{
            this.canUseMoney = res.total_usdt
          })
        },
        getdata(){//行情列表
            getPro().then(res => {  
                 
                    this.getProdata = res;
                    res.map((item, index)=>{
                        if(item.code == this.singlecode){
                            this.singlegetProdata = item;
                            return false;
                        }
                    });
                    this.getProInfoget(this.singlecode);
                    codelist(res);
                    let wsdata = {
                        sub: 'ticker@' + getToken('codeList'),
                    }
                    contractws(wsdata, this);
                 
            }).catch(err => {});
        },
        getProInfoget(data){// 获取币种配置信息
            let _Data = {
                code: data,
            };
            // if(!getToken('token')){
            //     this.getProInfodata={
            //         handling_fee: 1,
            //         leverage:[20,50,100],
            //         sheet_num: 1
            //     }
            //     return false;
            // };
            codeinfo(_Data).then(res => {  
                 
                    this.getProInfodata = res;
                    this.getProInfodata.leverage = res.leverage.split(',');
                 
            }).catch(err => {});
        },
        contractwslist(data){//数据处理
            let _Data = _.cloneDeep(this.getProdata);
            for (let index = 0; index < _Data.length; index++) {
                if(_Data[index].code == data.code){
                    for(let key in data){
                        _Data[index][key] = data[key]
                    }
                }
            };
            if(data.code == this.singlecode){
                for(let key in data){
                    this.singlegetProdata[key] = data[key]
                };
            };
            this.getProdata = _Data;
        },
        getMsgcreateOrder(data){//合约this.$t('contract[7]')
            if(!getToken('token')){
                this.$confirm(this.$t('contract[4]'), this.$t('header.tishi[1]'), {
                    type: 'warning'
                }).then(() => {
                    this.$router.push({path:'/login'})
                })
            };
            let titletext = {
                direction: data.otype == 1?this.$t('contract[5]'):this.$t('contract[6]'),
                quantity: data.buy_num,
                zhongjia:  data.zhongjia,
                type: data.type == 1?this.$t('contract[2]'): this.$t('contract[3]'),
                commission: data.type == 1?this.$t('zichan[2]'): data.buy_price,
                
                fee: data.fee,
            };
            const h = this.$createElement;
            this.$msgbox({
                title: this.$t('contract[7]'),
                message: h('div', {class: 'boxconit'}, [
                    h('ul', {class: 'conit'}, [
                        h('li', {class: 'list'}, [
                            h('p', {class: 'title'}, this.$t('contract[8]') ),
                            h('p', {class: 'text'}, titletext.direction),
                        ]),
                        h('li', {class: 'list'}, [
                            h('p', {class: 'title'}, this.$t('contract[9]') ),
                            h('p', {class: 'text'}, titletext.quantity),
                        ]),
                        h('li', {class: 'list'}, [
                            h('p', {class: 'title'}, this.$t('contract[10]') ),
                            h('p', {class: 'text'}, titletext.zhongjia),
                        ]),
                    ]),
                    h('ul', {class: 'conit'}, [
                        h('li', {class: 'list'}, [
                            h('p', {class: 'title'}, this.$t('contract[11]') ),
                            h('p', {class: 'text'}, titletext.type),
                        ]),
                        h('li', {class: 'list'}, [
                            h('p', {class: 'title'}, this.$t('contract[12]') ),
                            h('p', {class: 'text'}, titletext.commission),
                        ]),
                        h('li', {class: 'list'}, [
                            h('p', {class: 'title'}, this.$t('contract[13]') ),
                            h('p', {class: 'text'}, titletext.fee),
                        ]),
                    ]),
                ]),
                showCancelButton: true,
                confirmButtonText: this.$t('contract[14]'),
                cancelButtonText: this.$t('contract[15]'),
            }).then(action => {
                createOrder(data).then(res => {  
                     
                        this.$message({
                            message: this.$t('contract[16]'),
                            type: 'success'
                        });
                        this.assetInfo();
                        this.getBalance();
                    
                }).catch(err => {
                    
                });
            });
            
        },
    },
    created(){
        this.getdata();
        this.getBalance();
        if(this.$route.query.code){
            this.singlecode = this.$route.query.code;
        }else{
            this.singlecode = "btc/usdt";
        }
    },
    beforeRouteLeave: function(to, from, next){
        let wsdata = {
            unsub: 'ticker@' + getToken('codeList'),
        };
        let wsdatadepth = {
            unsub: 'depth@' + this.singlecode,
        };
        let wsdatatrader = {
            unsub: 'depth@' + this.singlecode,
        };
        contractws(wsdata, 'unsub');
        contractwsdepth( wsdatadepth , 'unsub');
        contractwstrader( wsdatatrader , 'unsub');
        next();
    },
    beforeEach: function(to, from, next){
        let wsdata = {
            unsub: 'ticker@' + getToken('codeList'),
        };
        let wsdatadepth = {
            unsub: 'depth@' + this.singlecode,
        };
        let wsdatatrader = {
            unsub: 'depth@' + this.singlecode,
        };
        contractws(wsdata, 'unsub');
        contractwsdepth( wsdatadepth , 'unsub');
        contractwstrader( wsdatatrader , 'unsub');
        next();
    },
    components: {
        contratnav,
        contratcontheader,
        contratrealtime,
        marketpricebuy,
        marketpricesell,
        fixedpricesell,
        fixedpricebuy,
        ContractOrder,
    },
};
</script>

